<!-- 笔记详情页面 -->
<template>
  <div class="note-detail">
    <!-- 全局加载效果 -->
    <van-loading v-if="isLoading" type="spinner" class="global-loading" />

    <!-- 内容区域，当加载时隐藏 -->
    <div v-else>
      <!-- 顶部导航栏 -->
      <div class="note-header">
        <div class="header-left">
          <van-icon name="arrow-left" class="back-icon" @click="goBack" />
          <div class="user-info">
            <van-image class="avatar" round :src="currentNote.author?.p" width="32" height="32" />
            <div class="user-meta">
              <div class="username">{{ currentNote.author?.n }}</div>
              <div class="user-level">
                LV.{{ currentNote.author?.lvl }} {{ currentNote.straight_text }}
              </div>
            </div>
          </div>
        </div>
        <div class="header-right">
          <van-button
            v-if="!noteData.isFollowing"
            type="primary"
            size="small"
            class="follow-btn"
            @click="handleFollow"
          >
            关注
          </van-button>
          <van-button
            v-else
            type="default"
            size="small"
            class="followed-btn"
            @click="handleUnfollow"
          >
            已关注
          </van-button>
          <van-icon name="ellipsis" class="more-icon" />
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="note-content">
        <!-- 图片/视频区域 -->
        <div class="media-section">
          <van-swipe
            ref="swipe"
            class="swipe"
            :loop="false"
            :show-indicators="false"
            @drag-end="onDragEnd"
          >
            <template v-for="(image, index) in currentNote.images" :key="index">
              <van-swipe-item class="swipe-item">
                <van-image class="media-image" :src="image.u" fit="contain" @load="onImageLoad" />
              </van-swipe-item>
            </template>
          </van-swipe>

          <!-- 自定义分页指示器 -->
          <div class="page-indicator" v-if="currentNote.images && currentNote.images.length > 1">
            {{ currentImageIndex + 1 }}/{{ currentNote.images.length }}
          </div>

          <!-- 精选标签 -->
          <div v-if="currentNote.selection_text" class="featured-tag">
            {{ currentNote.selection_text }}
          </div>
        </div>

        <!-- 正文内容 -->
        <div class="content-section">
          <h1 class="note-title">{{ currentNote.title }}</h1>
          <div class="note-body">
            <template v-for="(content, index) in currentNote.contents" :key="index">
              <template v-if="content.type === 3">
                <!-- tag 部分 -->
                <p class="tag" :style="{ color: content.color }">
                  <van-icon :name="content.icon" /><span>{{ content.c }}</span>
                </p>
              </template>
              <template v-if="content.type === 0">
                <!-- 正文 部分 -->
                <span class="para" :style="{ color: content.color }">{{ content.c }}</span>
              </template>
              <template v-if="content.type === 4"
                ><!-- 菜谱 部分 -->
                <!-- 菜谱卡片 -->
                <div class="recipe-card">
                  <van-image
                    class="recipe-image"
                    :src="content.recipe?.cook_cover_image"
                    fit="cover"
                  />
                  <div class="recipe-info">
                    <div class="recipe-title">{{ content.recipe?.n }}</div>
                    <div class="recipe-meta">
                      <span class="recipe-author">{{ content.recipe?.an }}</span>
                      <span class="recipe-views">{{ content.recipe?.recommend_label }}</span>
                    </div>
                  </div>
                  <div class="recipe-tag">菜谱</div>
                </div>
              </template>
            </template>
          </div>

          <!-- 时间和互动数据 -->
          <div class="meta-section">
            <span class="time-location">{{ currentNote.publishtime }}</span>
            <span class="interaction-count">
              <span class="view-count">{{ formatViewCount(noteData.viewCount) }}看过</span>
              <span class="collect-count">{{ currentNote.favo_count }}次收藏</span>
              {{ currentNote.like_count }}次赞
            </span>
          </div>
        </div>

        <!-- 评论区 -->
        <Comment :comments="currentNote.cs" />

        <!-- 相关笔记 -->
        <Related />
      </div>

      <!-- 底部操作栏 -->
      <div class="note-footer">
        <div class="comment-input-wrapper">
          <van-field
            v-model="commentText"
            class="comment-input"
            placeholder="说点什么..."
            :border="false"
          >
            <!-- <template #left-icon>
            <van-icon name="smile-o" />
          </template> -->
          </van-field>
        </div>
        <div class="action-buttons">
          <!-- 评论 -->
          <div class="action-item" @click="showComments">
            <van-icon name="chat-o" class="comment-btn" />
            <span class="action-count">{{ commentCount }}</span>
          </div>
          <!-- 点赞 -->
          <div class="action-item" @click="handleLike">
            <van-icon
              :name="isLiked ? 'like' : 'like-o'"
              :class="['like-btn', { active: isLiked }]"
            />
            <span class="action-count">{{ formatLikeCount(currentNote.like_count) }}</span>
          </div>
          <!-- 收藏 -->
          <div class="action-item" @click="handleCollect">
            <van-icon
              :name="isCollected ? 'star' : 'star-o'"
              :class="['collect-btn', { active: isCollected }]"
            />
            <span class="action-text">收藏</span>
          </div>
        </div>
      </div>

      <!-- 评论弹窗 -->
      <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '70vh' }">
        <div class="comment-modal">
          <!-- 弹窗标题栏 -->
          <div class="comment-header">
            <div class="comment-title">全部评论（{{ commentCount }}）</div>
            <van-icon name="cross" class="close-icon" @click="showBottom = false" />
          </div>

          <!-- 评论列表 -->
          <div class="comment-list">
            <div v-for="comment in currentNote.cs" :key="comment.id" class="comment-item">
              <van-image class="comment-avatar" round :src="comment.u?.p" width="30" height="30" />
              <div class="comment-content">
                <div class="comment-user">
                  <span class="username">{{ comment.u?.n }}</span>
                  <span class="user-level">LV.{{ comment.u?.lvl }}</span>
                </div>
                <div class="comment-text">{{ comment.content[0]?.c }}</div>
                <div class="comment-meta">
                  <span class="comment-date">{{ formatCommentDate(comment.t) }}</span>
                </div>
              </div>
              <div class="comment-actions">
                <div
                  class="like-btn"
                  :class="{ active: comment.isLiked }"
                  @click="toggleCommentLike(comment)"
                >
                  <van-icon :name="comment.isLiked ? 'like' : 'like-o'" />
                  <span>赞</span>
                </div>
              </div>
            </div>

            <!-- 评论列表结束分隔线 -->
            <div class="comment-end" v-if="currentNote.cs && currentNote.cs.length > 0">
              — End —
            </div>
          </div>

          <!-- 输入框区域 -->
          <div class="comment-input-area">
            <div class="input-box">
              <van-icon name="smile-o" class="input-icon" @click="showEmoji" />
              <input
                v-model="commentText"
                class="comment-input"
                placeholder="我想说两句"
                @keyup.enter="submitComment"
              />
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { fetchNoteDetail } from '@/api/index.js'
import { ref, reactive, computed, useTemplateRef, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Comment from '@/components/note/Comment.vue'
import Related from '@/components/note/Related.vue'

const swipeRef = useTemplateRef('swipe')

const router = useRouter()
const route = useRoute()

const id = computed(() => route.params.id) //笔记id

const commentText = ref('')

const currentNote = ref({})

// 加载状态
const isLoading = ref(true)

// 轮播相关状态
const currentImageIndex = ref(0)

// 当前笔记评论数量
const commentCount = computed(() => currentNote.value.cs?.length || 0)
// 显示评论弹窗状态
const showBottom = ref(false)

//是覅喜欢笔记
const like_state = computed(() => currentNote.value.like_state || false)
const isLiked = ref(like_state.value)

// 是覅否已收藏
const favo_state = computed(() => currentNote.value.favo_state)
const isCollected = ref(favo_state.value)

// 点赞数格式化
const formatLikeCount = (count) => {
  if (count < 1000) {
    return count
  } else {
    const kValue = count / 1000
    // 截断到小数点后一位（不四舍五入）
    const truncated = Math.floor(kValue * 10) / 10
    // 如果小数部分为 0，可以只显示整数（可选）
    return truncated % 1 === 0 ? truncated + 'k' : truncated.toFixed(1) + 'k'
  }
}

// 获取笔记详情
const getNoteDetail = async (id) => {
  try {
    const response = await fetchNoteDetail(id)

    // 检查响应是否存在且具有正确的结构
    if (response && response.state === 'success' && response.result && response.result.note) {
      currentNote.value = response.result.note
      // console.log('currentNote', currentNote.value)
    } else {
      console.log('获取笔记详情失败：响应数据结构不正确')
      console.log('响应内容：', response)
    }
  } catch (error) {
    console.log('获取笔记详情失败：', error)
  } finally {
    // 关闭加载效果
    isLoading.value = false
  }
}

// 初始化轮播图高度
const initSwipeHeight = () => {
  nextTick(() => {
    if (swipeRef.value && currentNote.value.images && currentNote.value.images.length > 0) {
      const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
      if (swipeItems[0]) {
        const firstItemHeight = swipeItems[0].offsetHeight
        swipeRef.value.$el.style.height = `${firstItemHeight}px`
        swipeRef.value.resize()
      }
    }
  })
}

// 监听路由参数变化，当从其他笔记跳转时重新加载数据
watch(
  () => id.value,
  (newId, oldId) => {
    if (newId && newId !== oldId) {
      // 重新设置加载状态
      isLoading.value = true
      getNoteDetail(newId)
    }
  },
  { immediate: true },
)

// 监听笔记数据变化，初始化轮播图高度
watch(
  () => currentNote.value.images,
  (newImages) => {
    if (newImages && newImages.length > 0) {
      // 延迟初始化，确保 DOM 已渲染
      setTimeout(initSwipeHeight, 100)
    }
  },
  { immediate: true },
)

// 手动滑动
const onDragEnd = ({ index }) => {
  if (swipeRef.value) {
    currentImageIndex.value = index

    // 滑动结束后更新轮播图高度
    nextTick(() => {
      const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
      if (swipeItems[index]) {
        const newHeight = swipeItems[index].offsetHeight
        swipeRef.value.$el.style.height = `${newHeight}px`
        swipeRef.value.resize()
      }
    })
  }
}

// 图片加载完成后的处理
const onImageLoad = (event) => {
  const img = event.target
  const swipeItem = img.closest('.van-swipe-item')

  if (swipeItem) {
    // 设置当前轮播项的高度为图片的实际高度
    const imgHeight = img.offsetHeight
    swipeItem.style.height = `${imgHeight}px`

    // 重新计算轮播图容器高度
    nextTick(() => {
      if (swipeRef.value) {
        // 获取当前激活的轮播项
        const activeIndex = currentImageIndex.value
        const swipeItems = swipeRef.value.$el.querySelectorAll('.van-swipe-item')
        if (swipeItems[activeIndex]) {
          const activeHeight = swipeItems[activeIndex].offsetHeight
          swipeRef.value.$el.style.height = `${activeHeight}px`
        }
        // 触发轮播图重新计算尺寸
        swipeRef.value.resize()
      }
    })
  }
}

// 模拟数据 - 根据设计稿更新
const noteData = reactive({
  id: 1,
  title: '牛尾骨炖萝卜',
  content: [
    '非常鲜美的牛尾骨萝卜汤！这个汤我家常炖，喜欢永个电炖锅，其实有时间用砂锅也不错，如果时间紧可以高压锅！牛尾骨和萝卜炖软糯，粉一点点盐和太太乐原味鲜松茸鲜提鲜调味，放点香菜，开吃吧！',
  ],
  coverImage:
    'https://cp1.douguo.com/upload/caiku/a/b/6/690x390_ab6c0e6f7c8e8b8e8c8f8e8d8f8e8c8f8e.jpg',
  recipeImage:
    'https://cp1.douguo.com/upload/caiku/a/b/6/690x390_ab6c0e6f7c8e8b8e8c8f8e8d8f8e8c8f8e.jpg',
  recipeName: '牛尾骨炖萝卜',
  imageCount: 7,
  isFeatured: true,
  publishTime: '2025-09-09',
  location: '',
  viewCount: 160000,
  likeCount: 177,
  collectCount: 8,
  isLiked: false,
  isCollected: false,
  tags: ['厨房鲜香秘诀', '太太乐松茸鲜', '一餐一筷见鲜香'],
  author: {
    name: '爱家爱娃爱美食',
    level: 8,
    checkInDays: 1574,
    avatar: 'https://cp1.douguo.com/upload/avatar/2021/09/30/1234567890.jpg',
    isFollowing: false,
  },
  comments: [
    {
      id: 1,
      username: '板刀面与馄饨汤',
      level: 6,
      avatar: 'https://cp1.douguo.com/upload/avatar/default.jpg',
      content: '周末学做👏',
      reply: '',
      likeCount: 0,
    },
    {
      id: 2,
      username: '小小的欢喜',
      level: 6,
      avatar: 'https://cp1.douguo.com/upload/avatar/default.jpg',
      content: '❤️❤️🌹',
      reply: '',
      likeCount: 0,
    },
  ],
  relatedNotes: [
    {
      id: 1,
      title: '9-29晚餐',
      author: '顶级高端吃货',
      image: 'https://cp1.douguo.com/upload/caiku/1/2/3/690x390_1234567890.jpg',
      likeCount: 173,
    },
    {
      id: 2,
      title: '健康饮食',
      author: '瑾瑜',
      image: 'https://cp1.douguo.com/upload/caiku/4/5/6/690x390_4567890123.jpg',
      likeCount: 3,
    },
    {
      id: 3,
      title: '9.28晚餐',
      author: '顶级高端吃货',
      image: 'https://cp1.douguo.com/upload/caiku/7/8/9/690x390_7890123456.jpg',
      likeCount: 10,
    },
    {
      id: 4,
      title: '9-27晚餐',
      author: '顶级高端吃货',
      image: 'https://cp1.douguo.com/upload/caiku/a/b/c/690x390_abcdef123456.jpg',
      likeCount: 6,
    },
  ],
})

// 方法定义
const goBack = () => {
  router.back()
  // 使用 nextTick 确保在页面渲染完成后滚动到顶部
  nextTick(() => {
    window.scrollTo(0, 0)
  })
}

const handleFollow = () => {
  noteData.author.isFollowing = true
  showToast('关注成功')
}

const handleUnfollow = () => {
  noteData.author.isFollowing = false
  showToast('已取消关注')
}

// 点赞
const handleLike = () => {
  isLiked.value = !isLiked.value

  //这里再向服务器更新点赞状态

  const feedback = [
    '收到你的点赞，感恩',
    '收到你的赞，收到你的爱',
    '你刚刚给人间撒了爱',
    '交个友点个赞',
    '贡献点爱，贡献爱',
    '爱点赞的都颜值高',
    '我喜欢你点赞的样子',
  ]

  if (isLiked.value) {
    // 启用随机反馈显示
    showToast({
      message: feedback[Math.floor(Math.random() * feedback.length)],
      position: 'top',
    })
  }
}

// 收藏
const handleCollect = () => {
  isCollected.value = !isCollected.value
  //这里再向服务器更新收藏状态

  if (isCollected.value) {
    // 启用随机反馈显示
    showToast({
      message: '收藏成功',
      position: 'top',
    })
  }
}

const formatViewCount = (count) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}

const showComments = () => {
  // 显示评论列表弹窗
  showBottom.value = true
}

// 格式化评论日期
const formatCommentDate = (timestamp) => {
  if (!timestamp) return ''

  const date = new Date(timestamp)
  const now = new Date()
  const diffTime = now.getTime() - date.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  }
}

// 评论点赞
const toggleCommentLike = (comment) => {
  comment.isLiked = !comment.isLiked
  // 这里可以添加点赞的API调用
  if (comment.isLiked) {
    comment.like_count = (comment.like_count || 0) + 1
  } else {
    comment.like_count = Math.max(0, (comment.like_count || 1) - 1)
  }
}

// 输入框获得焦点
const onFocus = () => {
  //弹出手机键盘
}

// 提交评论
const submitComment = () => {
  if (!commentText.value.trim()) {
    showToast('请输入评论内容')
    return
  }

  // 这里可以添加提交评论的API调用
  const newComment = {
    id: Date.now(),
    author: {
      n: '当前用户',
      lvl: 1,
      p: 'https://cp1.douguo.com/upload/avatar/default.jpg',
    },
    c: commentText.value,
    t: Date.now(),
    isLiked: false,
    like_count: 0,
  }

  if (!currentNote.value.cs) {
    currentNote.value.cs = []
  }
  currentNote.value.cs.unshift(newComment)
  commentText.value = ''
  showToast('评论成功')
}
</script>

<style scoped>
.note-detail {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60px;
  position: relative;
}

.global-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* 顶部导航栏样式 */
.note-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-icon {
  font-size: 20px;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  border: 1px solid #f0f0f0;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.user-level {
  font-size: 12px;
  color: #999;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.follow-btn {
  background: #ff4d4f;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  height: 28px;
  padding: 0 16px;
}

.followed-btn {
  border-radius: 16px;
  font-size: 12px;
  height: 28px;
  padding: 0 16px;
  color: #999;
  border-color: #ddd;
}

.more-icon {
  font-size: 18px;
  color: #666;
}

/* 内容区域样式 */
.note-content {
  /* padding: 0 16px; */
}

.media-section {
  position: relative;
  margin: 0 0 30px 0;
  width: 100vw;
  overflow: hidden;
  min-height: 200px;
  /* 设置最小高度防止布局抖动 */
}

/* 图片加载前显示占位样式 */
.media-section:has(.van-image:not([src])) {
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe {
  width: 100vw;
  /* height: auto !important; */
  transition: height 0.3s ease;
  /* 添加高度过渡效果 */
}

:deep(.van-swipe-item) {
  /* height: auto !important; */
  line-height: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.swipe-item {
  /* height: auto !important; */
  line-height: 0;
}

.media-image {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  max-height: 80vh;
  /* 限制最大高度，防止图片过大 */
}

:deep(.van-image) {
  display: block !important;
  height: auto !important;
  line-height: 0;
  width: 100%;
}

:deep(.van-image__img) {
  display: block;
  width: 100%;
  height: auto !important;
  line-height: 0;
  object-fit: contain;
  /* 保持图片比例，防止变形 */
}

.page-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 12px;
  font-size: 12px;
  z-index: 10;
}

.featured-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
}

.content-section {
  padding: 0 10px;
  margin-bottom: 24px;
}

.note-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.note-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  white-space: normal;
  word-wrap: break-word;
}

.note-body .tag {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1.6;
  margin: 0 10px 0 0;
}

.note-body .tag .van-icon {
  vertical-align: text-bottom;
  font-size: 14px;
}

.note-body .tag span {
  margin-left: -1px;
}

.note-body .para {
  font-size: 14px;
  display: inline;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: baseline;
  line-height: 1.6;
}

.meta-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #999;
}

.interaction-count {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-count,
.collect-count {
  font-size: 12px;
  color: #999;
}

/* 菜谱卡片样式 */
.recipe-card {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
  gap: 12px;
}

.recipe-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  flex-shrink: 0;
}

.recipe-info {
  flex: 1;
}

.recipe-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.recipe-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 12px;
  color: #999;
  flex-direction: column;
}

.recipe-author {
  color: #333;
}

.recipe-tag {
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: auto;
}

/* 底部操作栏样式 */
.note-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  z-index: 100;
}

.comment-input-wrapper {
  flex: 1;
  margin-right: 12px;
}

.comment-input {
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 12px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.comment-btn,
.like-btn,
.collect-btn {
  font-size: 20px;
  color: #999;
}

.like-btn.active,
.collect-btn.active {
  color: #ff4d4f;
}

.action-count,
.action-text {
  font-size: 12px;
  color: #999;
}

/* 评论弹窗样式 */
.comment-modal {
  background: #fff;
  border-radius: 16px 16px 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.comment-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.close-icon {
  font-size: 20px;
  color: #888;
}

.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 10px 20px 10px;
}

.comment-avatar {
  flex-shrink: 0;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.comment-user .username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.comment-user .user-level {
  font-size: 12px;
  color: #ffd700;
  margin-left: 8px;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.comment-meta {
  display: flex;
  align-items: center;
}

.comment-date {
  font-size: 12px;
  color: #888;
}

.comment-actions {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  color: #888;
  padding: 4px 8px;
  border-radius: 12px;
  /* background: #f5f5f5; */
}

.like-btn.active {
  color: #ff4040;
  background: #ffeaea;
}

.like-btn .van-icon {
  font-size: 14px;
}

.comment-end {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: #e0e0e0;
}

.comment-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.input-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 12px 16px;
}

.input-icon {
  font-size: 18px;
  color: #666;
  margin-right: 8px;
}

.comment-input {
  flex: 1;
  border: none;
  outline: none;
  background: #f5f5f5;
  font-size: 16px;
  color: #333;
}

.comment-input::placeholder {
  color: #aaa;
}
</style>
